<template>
    <div class="custom-layout">
        <!-- 固定侧边栏 -->
        <div class="fixed-sider" style="background: #f6f6f6; border-right: 1px solid #e0e0e0;">
            <div class="logo" @selectstart.prevent @mousedown.prevent>
                <svg t="1747731025596" style="
                object-fit: contain;
                filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
                border-radius: 8px;" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="10943" width="64" height="64">
                    <path
                        d="M496.46 505.46v165.78H247.78C156.22 671.24 82 597.02 82 505.46s74.22-165.79 165.78-165.79 165.79 74.23 165.79 165.79h82.89z"
                        fill="#C3D2FB" p-id="10944"></path>
                    <path
                        d="M807.3 381.12c0 93.99-44.69 177.53-113.98 230.55v59.57H517.18c-160.23 0-290.12-129.89-290.12-290.12S356.95 91 517.18 91 807.3 220.89 807.3 381.12z"
                        fill="#7094F3" p-id="10945"></path>
                    <path d="M714.05 443.29m-227.95 0a227.95 227.95 0 1 0 455.9 0 227.95 227.95 0 1 0-455.9 0Z"
                        fill="#386BF3" p-id="10946"></path>
                    <path
                        d="M297.95 758.49h87.25v130.88h-87.25zM472.46 758.49h87.25V933h-87.25zM646.97 758.49h87.25v130.88h-87.25z"
                        fill="#3D4265" p-id="10947"></path>
                </svg>
                <span class="logo-text" style="cursor: default;">FlashCloud</span>
            </div>

            <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline" class="side-menu"
                :style="{ borderRight: 'none' }" @select="handleMenuSelect" @selectstart.prevent @mousedown.prevent>
                <a-menu-item key="1">
                    <template #icon>
                        <HomeOutlined />
                    </template>
                    <span class="nav-text">首页</span>
                </a-menu-item>
                <a-menu-item key="2">
                    <template #icon>
                        <BookOutlined />
                    </template>
                    <span class="nav-text">文档</span>
                </a-menu-item>
                <a-menu-item key="3">
                    <template #icon>
                        <FileImageOutlined />
                    </template>
                    <span class="nav-text">图片</span>
                </a-menu-item>
                <a-menu-item key="4">
                    <template #icon>
                        <VideoCameraOutlined />
                    </template>
                    <span class="nav-text">视频</span>
                </a-menu-item>
                <a-menu-item key="6">
                    <template #icon>
                        <AudioOutlined />
                    </template>
                    <span class="nav-text">音频</span>
                </a-menu-item>
                <a-menu-item key="5">
                    <template #icon>
                        <SmallDashOutlined />
                    </template>
                    <span class="nav-text">其他</span>
                </a-menu-item>
            </a-menu>
            <div class="storage-info" @click="showStorageInfo()">
                <a-progress :percent="50" style="object-fit: contain;
                        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
                        border-radius: 8px;" :stroke-color="{
                            '0%': '#108ee9',
                            '100%': '#87d068'
                        }" :show-info="false" :trail-color="'rgba(255, 255, 255, 10)'" />
                <div class="storage-text">
                    <span>已用 50GB / 100GB</span>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 固定顶部栏 -->
            <div class="fixed-header">
                <!-- 第一行：控制工具栏 -->
                <div class="finder-toolbar">
                    <div class="finder-left">
                        <a-button type="text" shape="circle" size="small">
                            <LeftOutlined />
                        </a-button>
                        <a-button type="text" shape="circle" size="small" style="margin-left: 8px;">
                            <RightOutlined />
                        </a-button>

                        <div class="finder-actions">
                            <a-checkbox v-model:checked="allChecked" style="margin-left: 16px;">
                                全选
                            </a-checkbox>
                            <a-button type="default" size="small" style="margin-left: 12px">
                                <UploadOutlined />
                            </a-button>
                            <a-button type="default" size="small" style="margin-left: 8px">
                                <DownloadOutlined />
                            </a-button>
                        </div>
                    </div>
                    <div class="finder-middle"></div>
                    <div class="finder-right">
                        <a-input-search v-model:value="value" placeholder="搜索" size="small"
                            style="width: 200px; margin-right: 12px" />
                        <a-radio-group size="small" v-model:value="viewMode">
                            <a-radio-button value="IconView">
                                <AppstoreOutlined />
                            </a-radio-button>
                            <a-radio-button value="ListView">
                                <MenuOutlined />
                            </a-radio-button>
                        </a-radio-group>
                    </div>
                </div>
            </div>

            <!-- 可滚动内容区 -->
            <div class="scrollable-content">
                <FilesShow :category="currentCategory" :view-mode="viewMode" />
            </div>

        </div>
        <!-- 新增的面包屑导航栏 -->
        <div class="fixed-footer" @selectstart.prevent @mousedown.prevent>
            <div class="finder-path-bar">
                <a-breadcrumb>
                    <a-breadcrumb-item>我的文件</a-breadcrumb-item>
                    <a-breadcrumb-item><a href="">工作</a></a-breadcrumb-item>
                    <a-breadcrumb-item><a href="">文档</a></a-breadcrumb-item>
                    <a-breadcrumb-item>年度工作总结</a-breadcrumb-item>
                </a-breadcrumb>
            </div>

            <div class="current-info">
                <span class="footer-left">共 {{ totalItems }} 项</span>

                <!-- 已选择项信息和提示信息结合 -->
                <span class="footer-right">
                    已选择 {{ selectedCount }} 项
                    <span v-show="selectedCount > 1 && !isMultiSelectMode" style="color: #ff4d4f; margin-left: 8px;">
                        提示：按住 Ctrl 键可进行多选
                    </span>
                </span>
            </div>
        </div>

    </div>

    <!-- 存储信息模态框 -->
    <a-modal v-model:visible="storageModalVisible" title="存储空间详情" :footer="null" width="600px" style="cursor: default;">
        <div class="storage-modal-content" @selectstart.prevent @mousedown.prevent style="cursor: default;">
            <div class="virtual-disk-icon-wrapper">
                <img src="../assets/icons/虚拟硬盘.svg" alt="虚拟硬盘" class="virtual-disk-icon" />
            </div>
            <!-- 容量横条（仿macOS） -->
            <div class="storage-bar">
                <div class="storage-bar-fill">
                    <div v-for="item in storageData" :key="item.type" class="storage-segment"
                        :style="{ width: item.percentage + '%', backgroundColor: item.color }">
                    </div>
                </div>
                <div class="storage-total">已使用 50GB / 100GB</div>
            </div>

            <!-- 各类信息列表 -->
            <div class="storage-details">
                <div class="storage-category" v-for="item in storageData" :key="item.type">
                    <span class="category-color" :style="{ backgroundColor: item.color }"></span>
                    <span class="category-name">{{ item.name }}</span>
                    <span class="category-size">{{ item.size }}GB ({{ item.percentage }}%)</span>
                </div>
            </div>

        </div>
    </a-modal>


</template>

<script>
import { ref, computed } from 'vue';
import FilesShow from '@/views/FilesShow.vue'

import {
    HomeOutlined,
    BookOutlined,
    FileImageOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    ReloadOutlined,
    SmallDashOutlined,
    AppstoreOutlined,
    MenuOutlined,
    LeftOutlined,
    RightOutlined,
    DownloadOutlined,
    AudioOutlined
} from '@ant-design/icons-vue';

export default {
    components: {
        FilesShow,
        HomeOutlined,
        BookOutlined,
        FileImageOutlined,
        VideoCameraOutlined,
        UploadOutlined,
        ReloadOutlined,
        SmallDashOutlined,
        AppstoreOutlined,
        MenuOutlined,
        LeftOutlined,
        RightOutlined,
        DownloadOutlined,
        AudioOutlined
    },
    setup () {
        const storageModalVisible = ref(false);
        const size = ref('small');
        const allChecked = ref(false); // 控制全选复选框
        const viewMode = ref('IconView'); // 当前视图模式

        // 新增：用于文件计数和状态显示的数据
        const totalItems = ref(128); // 总文件数
        const selectedFileIds = ref([]); // 选中的文件ID数组
        const isMultiSelectMode = ref(false); // 是否处于多选模式


        const currentCategory = ref('all'); // all 表示全部文件
        const selectedKeys = ref(['1']);

        // 映射菜单 key 到文件类型
        const menuKeyToFileType = {
            '1': 'all',     // 首页 => 全部文件
            '2': 'document', // 文档
            '3': 'image',    // 图片
            '4': 'video',    // 视频
            '5': 'other',    // 其他
            '6': 'audio'     // yinp
        };

        function handleMenuSelect ({ key }) {
            const type = menuKeyToFileType[key] || 'all';
            currentCategory.value = type;
        }


        // 计算属性：已选中文件数量
        const selectedCount = computed(() => {
            return selectedFileIds.value.length;
        });

        // 方法：更新选中状态
        const updateSelection = (fileIds, isMultiSelect) => {
            selectedFileIds.value = [...fileIds];
            isMultiSelectMode.value = isMultiSelect;
        };

        // 伪造的存储数据
        const storageData = ref([
            { type: 'doc', name: '文档', size: 15, percentage: 30, icon: BookOutlined, color: '#1890ff' },
            { type: 'image', name: '图片', size: 20, percentage: 40, icon: FileImageOutlined, color: '#52c41a' },
            { type: 'video', name: '视频', size: 10, percentage: 20, icon: VideoCameraOutlined, color: '#faad14' },
            { type: 'other', name: '其他', size: 5, percentage: 10, icon: SmallDashOutlined, color: '#f5222d' }
        ]);

        function showStorageInfo () {
            storageModalVisible.value = true;
        }

        // 返回新增的状态和方法
        return {
            selectedKeys,
            storageModalVisible,
            storageData,
            showStorageInfo,
            size,
            allChecked,
            viewMode,
            totalItems,
            selectedFileIds,
            isMultiSelectMode,
            selectedCount,
            updateSelection,
            handleMenuSelect,
            currentCategory

        }
    }
}
</script>

<style>
/* 基础布局 */
.custom-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* 固定侧边栏 */
.fixed-sider {
    width: 200px;
    height: 100vh;
    background: #F2F2F7;
    /* macOS 浅灰背景 */
    flex-shrink: 0;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    border-right: 1px solid #D1D1D6;
    /* macOS 侧边栏分割线 */
}

/* 主内容区 */
.main-content {
    flex: 1;
    margin-left: 200px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    /* 为底部元素定位提供参考 */
}

/* 固定顶部 */
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 40px;
    background: rgba(245, 245, 247, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

/* 第一行 */
.finder-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* 确保工具栏占满宽度 */
}

/* 第二行 */
.finder-breadcrumb {
    display: flex;
    justify-content: center;
    font-size: 14px;
}

.finder-actions {
    display: flex;
    align-items: center;
}

/* 左中右三块 */
.finder-left {
    display: flex;
    align-items: center;
}

.finder-right {
    display: flex;
    align-items: center;
    padding-right: 12rem;
}

.finder-middle {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* macOS 风格的面包屑导航栏 */
.finder-path-bar {
    margin-bottom: 5px;
}

/* 当前信息区域样式 */
.current-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

/* 面包屑样式 */
.ant-breadcrumb {
    width: 100%;
    font-size: 13px;
}

a {
    color: #007AFF;
}

/* macOS 蓝色链接 */
a:hover {
    text-decoration: underline;
}




/* 修改 control-btn 样式 */
.control-btn {
    position: absolute;
    right: 24px;
    transform: translateY(-50%);
}


.finder-actions {
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.fixed-header .ant-btn {
    padding: 0 10px;
}


/* 如果需要调整文件路径的位置 */
.files-path {
    padding-top: 1rem;
    margin-right: 120px;
    /* 给控制按钮留出空间 */
}

/* 可滚动内容区 */
.scrollable-content {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* 固定底部样式 - 整合后的脚部 */
.fixed-footer {
    height: 3.5rem;
    position: fixed;
    bottom: 0;
    left: 200px;
    /* 与侧边栏宽度一致 */
    right: 0;
    padding: 10px 20px;
    background: rgba(245, 245, 247, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    /* 添加向上的阴影 */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 999;
}

.footer-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.footer-left,
.footer-right {
    user-select: none;
}


/* Logo样式 */
/* Logo区域背景 */
.logo {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1D1D1F;
    /* 深色字体 */
    background: #EAEAEE;
    /* 更浅灰 */
    border-bottom: 1px solid #D1D1D6;

}

.logo-text {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    border-radius: 8px;
}

/* 新增样式 */
.storage-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;

}


.storage-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
}

/* 菜单样式 */
/* 菜单字体颜色和背景 */
.side-menu {
    border-right: 0;
    height: calc(100% - 180px);
    overflow-y: auto;
    background: transparent;
}

/* 菜单项字体颜色 */
.side-menu .ant-menu-item {
    color: #3C3C4399;
    /* macOS 默认文字颜色，带透明度 */
    font-weight: 500;
    font-size: 14px;
}

/* 选中菜单项高亮 */
.side-menu .ant-menu-item-selected {
    background-color: #007AFF !important;
    /* macOS 蓝色选中 */
    color: white !important;
}

/* 鼠标悬停菜单项背景 */
.side-menu .ant-menu-item:hover {
    background-color: #E5E5EA;
    color: #007AFF;
}

/* 图标颜色随文字颜色变更 */
.side-menu .ant-menu-item svg {
    fill: currentColor;
}

.storage-bar {
    margin-bottom: 24px;
}

.storage-bar-fill {
    display: flex;
    height: 18px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #2f3542;
    /* trail color */
}

.storage-segment {
    height: 100%;
}

.storage-total {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    text-align: right;
}

.storage-category {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}


.category-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 8px;
}

.category-name {
    flex: 1;
}

.category-size {
    color: #999;
}

.virtual-disk-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.virtual-disk-icon {
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    border-radius: 8px;
    width: 128px;
    height: 128px;
    object-fit: contain;
}


/* 底部存储信息背景改淡灰 */
.storage-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: #EAEAEE;
    border-top: 1px solid #D1D1D6;
    cursor: pointer;
    color: #3C3C4399;

}

.storage-text {
    color: #3C3C4399;
    font-size: 12px;
    margin-top: 8px;
    text-align: center;

}

.files-path {
    padding-top: 1rem;
}
</style>